import { map } from "lodash";
import React from "react";
import { Section, Checkbox, Input, InputNumber, Select } from "@/components/visualizations/editor";
import { EditorPropTypes } from "@/visualizations/prop-types";
import * as Grid from "antd/lib/grid";

export default function GridSettings({ options, onOptionsChange }) {
  return (
    <React.Fragment>
      <Section>
        <Grid.Row>
          <Grid.Col span={12}>
            <InputNumber
              label="每页行数"
              min='0'
              defaultValue={options.itemsPerPage}
              onChange={itemsPerPage => onOptionsChange({ itemsPerPage })}
            />
          </Grid.Col>
          <Grid.Col span={12}>
            <Select
              label="列默认对齐方式"
              data-test="Chart.DataLabels.ColsAlign"
              defaultValue={options.colsAlign}
              onChange={colsAlign => {!!colsAlign && options.columns.map(col=>{col.alignContent=colsAlign});onOptionsChange({ colsAlign })}}>
              <Select.Option key="">-无-</Select.Option>
              <Select.Option key="left">左对齐</Select.Option>
              <Select.Option key="center">居中</Select.Option>
              <Select.Option key="right">右对齐</Select.Option>
            </Select>
          </Grid.Col>
        </Grid.Row>
      </Section>
      <Section>
        <Grid.Row>
          <Grid.Col span={12}>
            <InputNumber
              label="字体大小（px）"
              min='1'
              defaultValue={options.fontsize || 12}
              onChange={fontsize => onOptionsChange({ fontsize })}
            />
          </Grid.Col>
          <Grid.Col span={12}>
            <Input
              label="指定行高（如:30px）"
              defaultValue={options.rowHeight}
              onChange={e => onOptionsChange({ rowHeight: e.target.value })}
            />
          </Grid.Col>
        </Grid.Row>
      </Section>
      <Section>
        <Grid.Row>
          <Grid.Col span={12}>
            <Checkbox
              data-test="Chart.DataLabels.Checkbox"
              defaultChecked={options.checkbox}
              onChange={event => onOptionsChange({ checkbox: event.target.checked })}>
              支持行选择，操作名称：
            </Checkbox>
            <Input
              value={options.checkboxTitle}
              disabled={!options.checkbox}
              onChange={e => onOptionsChange({ checkboxTitle: e.target.value })}
              placeholder="行选择操作名称"
            />
          </Grid.Col>
          <Grid.Col span={12}>
            <Checkbox
              data-test="Chart.DataLabels.AutoScroll"
              defaultChecked={options.autoScroll}
              onChange={event => onOptionsChange({ autoScroll: event.target.checked })}>
              行自动滚动(不分页)，滚动速度(秒)：
            </Checkbox>
            <InputNumber
              min='1'
              disabled={!options.autoScroll}
              defaultValue={options.autoScrollSpeed || 1}
              onChange={autoScrollSpeed => onOptionsChange({ autoScrollSpeed })}
            />
          </Grid.Col>
        </Grid.Row>
      </Section>
      <Section>
        <Grid.Row>
          <Grid.Col span={12}>
            <Input
              value={options.checkboxSql}
              label="行选择执行存储过程："
              disabled={!options.checkbox}
              onChange={e => onOptionsChange({ checkboxSql: e.target.value })}
              placeholder="行选择执行存储过程"
            />
          </Grid.Col>
          <Grid.Col span={12}>
          </Grid.Col>
        </Grid.Row>
      </Section>
      <Section>
        <Checkbox
          data-test="Chart.DataLabels.RowOddEven"
          defaultChecked={options.rowOddEven}
          onChange={event => onOptionsChange({ rowOddEven: event.target.checked })}>
          奇偶行背景错色
        </Checkbox>
        <Checkbox
          data-test="Chart.DataLabels.Header"
          defaultChecked={options.hideHeader}
          onChange={event => onOptionsChange({ hideHeader: event.target.checked })}>
          隐藏标题栏
        </Checkbox>
        <Checkbox
          data-test="Chart.DataLabels.hideGrid"
          defaultChecked={options.hideGrid}
          onChange={event => onOptionsChange({ hideGrid: event.target.checked })}>
          隐藏网格线
        </Checkbox>
        <Checkbox
          data-test="Chart.DataLabels.AutoScrollBarHidden"
          disabled={!options.autoScroll}
          defaultChecked={options.autoScrollBarHidden}
          onChange={event => onOptionsChange({ autoScrollBarHidden: event.target.checked })}>
          隐藏垂直滚动条
        </Checkbox>
      </Section>

      <Section>
        <Grid.Row>
          <Grid.Col span={12}>
            <Input
              label="标题区背景颜色"
              value={options.bgColor}
              onChange={e => onOptionsChange({ bgColor: e.target.value })}
              placeholder="标题区背景颜色"
            />
          </Grid.Col>
          <Grid.Col span={12}>
            <Input
              label="标题区文字颜色"
              value={options.titleColor}
              onChange={e => onOptionsChange({ titleColor: e.target.value })}
              placeholder="标题区文字颜色"
            />
          </Grid.Col>
        </Grid.Row>
      </Section>

      <Section>
        <Grid.Row>
          <Grid.Col span={12}>
            <Input
              label="固定列背景颜色"
              value={options.fixedbgColor}
              onChange={e => onOptionsChange({ fixedbgColor: e.target.value })}
              placeholder="固定列背景颜色"
            />
          </Grid.Col>
          <Grid.Col span={12}>
            <Input
              label="固定列文字颜色"
              value={options.fixedtitleColor}
              onChange={e => onOptionsChange({ fixedtitleColor: e.target.value })}
              placeholder="固定列文字颜色"
            />
          </Grid.Col>
        </Grid.Row>
      </Section>

      <Section>
        <Checkbox
          data-test="Chart.DataLabels.ClickEnabled"
          defaultChecked={options.clickEnabled}
          onChange={event => onOptionsChange({ clickEnabled: event.target.checked })}>
          支持行点击
        </Checkbox>
        <Checkbox
          defaultChecked={options.doubleClick}
          disabled={!options.clickEnabled}
          onChange={event => onOptionsChange({ doubleClick: event.target.checked })}>
          双击（默认单击）
        </Checkbox>
      </Section>

      <Section>
        <Input
          layout="horizontal"
          label="点击返回值列名（支持行点击必填）"
          disabled={!options.clickEnabled}
          defaultValue={options.clickColumn}
          onChange={e => onOptionsChange({ clickColumn: e.target.value })}
        />
      </Section>

      <Section>
        <Input
          layout="horizontal"
          label="点击返回参数名"
          disabled={!options.clickEnabled}
          defaultValue={options.clickParameter}
          onChange={e => onOptionsChange({ clickParameter: e.target.value })}
        />
      </Section>
    </React.Fragment>    
  );
}

GridSettings.propTypes = EditorPropTypes;
